<template>
  <div>
    <Tabs :tabs="tabs" @tabsItemChange="onTabsItemChange"></Tabs>
    <div class="fb_top">
      <div class="fb_title">问题的种类</div>
      <div class="fb_tips">
        <span>功能建议</span>
        <span>购买遇到问题</span>
        <span>性能问题</span>
        <span>其他</span>
      </div>
      <!-- 输入框区 -->
      <div class="fb_content">
        <!-- 输入框 -->
        <textarea placeholder="请描述" @input="onInput"></textarea>

        <div class="tool">
          <van-uploader
            :before-read="beforeRead"
            :after-read="afterRead"
            v-model="fileList"
            :max-count="4"
          />
          <!-- 显示图片 -->
          <div class="up_pic" v-for="(item,index) in picArr" :key="index" @click="onClear(index)"></div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="footer">
        <van-button type="warning" @click="submitBtn">
          <van-icon name="success" />提交
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
import Tabs from '../components/Tabs'

export default {
  components: { Tabs },
  data() {
    return {
      tabs: [
        { id: 0, value: '体验问题', isActive: true },
        { id: 1, value: '商品/商家投诉', isActive: false }
      ],
      picArr: [],
      inputValue: '',
      fileList: []
    }
  },
  methods: {
    // 返回布尔值
    beforeRead(file) {
      if (file.type !== 'image/jpeg') {
        this.$toast('请上传 jpg 格式图片')
        return false
      }
      return true
    },
    async afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
      const res = await this.$http.post('/uploads/transfer', this.fileList, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      console.log(res)
      if (res.status !== 200) {
        return setTimeout(() => {
          file.status = ''
          file.message = '上传失败'
        }, 1000)
      }
      file.status = 'uploading'
      file.message = '上传中...'
    },
    // 接收组件的数据 index
    onTabsItemChange(index) {
      console.log('切换tabs')
      this.tabs.forEach((v, i) => {
        i === index ? (v.isActive = true) : (v.isActive = false)
      })
    },
    onInput(e) {
      console.log('输入内容')
      console.log(e)
      this.inputValue = e.target.value
    },
    submitBtn() {
      console.log('提交反馈')
      if (!this.inputValue.trim()) {
        this.$toast('请正确输入后提交')
        return
      }
      this.$toast.loading({
        message: '正在上传',
        forbidClick: true,
        loadingType: 'spinner'
      })
      setTimeout(() => {
        this.$toast.success('提交成功')
      }, 1000)
    }
  }
}
</script>

<style lang='less' scope>
page {
  background-color: #eee;
}

.fb_top {
  padding: 5px;

  .fb_title {
    margin-bottom: 5px;
  }

  .fb_tips {
    display: flex;
    // 换行
    flex-wrap: wrap;

    span {
      background-color: #fff;
      width: 30%;
      padding: 5px;
      margin: 5px 5px;
      text-align: center;
    }
  }

  .fb_content {
    background-color: #fff;

    textarea {
      width: 100%;
      height: 200px;
      margin-top: 16px;
      padding: 5px;
    }

    .tool {
      display: flex;
      flex-wrap: wrap;
      padding: 5px;

      button {
        width: 45px;
        height: 45px;
        margin: 0;
        margin-left: 10px;

        color: #ccc;
        background-color: #f6f7f6;
        border: 1px solid #ccc;

        font-size: 20px;
        font-weight: 600;

        display: flex;
        justify-content: center;
        align-items: center;
      }

      .up_pic {
        margin-left: 10px;
      }
    }
  }

  .footer {
    width: 100%;
    margin-top: 10px;
    display: flex;
    flex-direction: row-reverse;

    button {
      background-color: var(--themeColor);
      color: #fff;
      width: 91px;
      height: 38px;
      font-size: 17px;
      line-height: 38px;
      font-weight: 600;
    }
  }
}
</style>
